<template>
	<!-- #ifdef APP-PLUS||MP-WEIXIN --> 
	<image :lazy-load="true" :src="imgObj.src" :style="{'width':width, 'height':height}" :mode="mode"></image>  
	<!-- #endif -->  
	<!-- #ifdef H5 -->  
	<view class="lazy-image">
		<img v-lazy="imgObj" :style="{'width': width, 'height': height, 'object-fit': fit}" :key="imgObj.src" />
	</view>
	<!-- #endif -->  
</block>  
</template>

<script>
	import Vue from 'vue'
	import VueLazyload from 'vue-lazyload'
	Vue.use(VueLazyload, {
		loading: require('@/public/images/public/loading.png'), // 加载中图片，一定要有，不然会一直重复加载占位图
		error: require('@/public/images/public/error.png'), // 加载失败图片
		attempt: 1 // <<= 图片加载失败后的重试次数.默认为3
	})
	
	/**
	 * LazyImage 图片懒加载
	 * @description 图片懒加载节省网络资源
	 * @property {String} src 图片路径
	 * @property {String} [type] = [expert|user|bar] 图片类型
	 *  @value expert 专家头像
	 *  @value user 用户头像
	 *  @value bar 球吧logo
	 * @property {String} [width] 图片宽度
	 * @property {String} [height] 图片高度
	 * @property {String} [mode] 裁剪方式，同uni image 裁剪方式
	 * @property {Boolean} [fit] 裁剪方式，同原生 object-fit 裁剪方式
	 * @example <LazyImage :src="src" type="expert" fit="cover"></LazyImage>
	 */
	export default{
		name: "LazyImage",
		props:{
			src:{
				type:String
			},
			type:{
				type:String,
				default:''
			},
			width:{
				type:String,
				default:'100%'
			},
			height:{
				type:String,
				default:'100%'
			},
			mode:{
				type:String,
				default:'aspectFill'
			},
			fit:{
				type:String,
				default:'cover'
			}
		},
		computed: {
			imgObj() {
				if(this.type == 'expert'){//专家默认头像
					return { src: this.src, error: this.$CHS.defaultExpertAvatar }
				}else if(this.type == 'user'){//用户默认头像
					return { src: this.src, error: this.$CHS.defaultUserAvatar }
				}else if(this.type == 'bar'){//球吧默认logo
					return { src: this.src, error: this.$CHS.defaultBarAvatar }
				}else{
					return { src: this.src }
				}
			}
		},
	}
</script>

<style>
	img {
		width: 100%; 
		height: 100%;
		object-fit: cover;
		border-radius: inherit;
	}
	img[lazy=loading] {  
	    /*加载中*/  
	}  
	img[lazy=error] {  
	    /*加载失败*/  
	}  
	img[lazy=loaded] {  
	    /*加载完成*/  
	}
</style>